<script setup lang='ts'>
import { ref, onMounted } from "vue"
import { getBookListenInfo } from "@/api/index"
import { useRouter } from 'vue-router'
import LoadingPage from "@/components/LoadingPage.vue"
import BookViewFirst from "@/components/BookViewFirst.vue"
import BookViewSecond from "@/components/BookViewSecond.vue"
const $router = useRouter()
const listenBookInfo = ref<any>()
const isLoading = ref<boolean>(true)
onMounted(async () => {
    let res = await getBookListenInfo($router.currentRoute.value.query.uuid)
    listenBookInfo.value = res.data.data.list
    isLoading.value = false

})
const toBookDetail = (book: any) => {
    if (book.p_action == 200) {
        $router.push({ path: '/detail', query: { id: book.id, title: book.title } })

    } else if (book.p_action == 500 || book.p_action == 800) {
        $router.push({ path: '/book-listen', query: { id: book.id } })

    }

}
</script>

<template>
    <!-- <div> -->
    <LoadingPage v-if="isLoading" />
    <div class="listen" v-else>

        <div class="banner" v-if="listenBookInfo[0]">
            <van-swipe :autoplay="3000" lazy-render :indicator-color="'#fff'">
                <van-swipe-item v-for="image in listenBookInfo[0].banners" :key="image">
                    <img :src="image.cover" @click="toBookDetail(image)" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="this-week">
            <h3>{{ listenBookInfo[1].name }}</h3>
            <BookViewFirst v-for="book in listenBookInfo[1].list" :key="book.id" :bookinfo="book"
                @click="toBookDetail(book)" />
        </div>
        <div class="banner2">
            <img :src="listenBookInfo[2].cover" alt="" @click="toBookDetail(listenBookInfo[2])">
        </div>
        <div class="girl-select">
            <h3>{{ listenBookInfo[3].name }}</h3>
            <div class="girl-select-list">
                <BookViewSecond v-for="book in listenBookInfo[3].list" :key="book.id" :book="book"
                    @click="toBookDetail(book)" />
            </div>
        </div>
        <div class="bottom">
            <p>我是有底线的</p>
        </div>
    </div>
    <!-- </div> -->
</template>

<style lang="less" scoped>
.listen {
    >.banner {
        width: 100%;
        overflow: hidden;

        img {
            width: 100%;
        }
    }

    >.this-week {
        margin-top: 25rem;
        border-bottom: 1px solid #eee;

        h3 {
            margin-bottom: 10rem;
        }
    }

    >.banner2 {
        width: 100%;
        padding: 14rem 0 20rem;
        border-bottom: 1px solid #eee;

        img {
            border: 5rem;
            width: 100%;
        }
    }

    >.girl-select {
        margin-top: 25rem;
        border-bottom: 1px solid #eee;
        width: 100%;
        padding-bottom: 10rem;

        >h3 {
            margin-bottom: 10rem;
        }

        .girl-select-list {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }

    .bottom {
        padding: 15rem 0;

        p {
            text-align: center;
            // padding-bottom: 10rem;
            color: #999
        }
    }

}
</style>
